<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <style type="text/css">
        table.altrowstable {
          width: 60%;
          font-family: verdana,arial,sans-serif;
          font-size: 11px;
          color: #333333;
          border-width: 1px;
          border-color: #a9c6c9;
          border-collapse: collapse;
          margin-left: 20%;
          margin-top: 5%;
        }
        table.altrowstable th {
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #a9c6c9;
        }
        table.altrowstable td {
          border-width: 1px;
          padding: 8px;
          text-align: center;
          border-style: solid;
          border-color: #a9c6c9;
        }
        .oddrowcolor{
          background-color:#d4e3e5;
        }
        .evenrowcolor{
          background-color:#c3dde0;
        }
        .popup_title {
          border-top: #fff 1px solid;
          font-size: 14px;
          margin: 0em;
          border-left: #fff 1px solid;
          color: #666;
          line-height: 1.75em;
          border-bottom: #999 1px solid;
          text-align: center;
        }
        .popup_content {
           padding-right: 1.75em;
           padding-left: 1.75em;
           padding-bottom: 1em;
           margin: 0em;
           padding-top: 1em;
        }
        .popup_container {
          border: #999 5px solid;
          font-size: 12px;
          background: #fff;
          color: #000;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
           border-radius: 5px;
          position: fixed; z-index: 99999;
          padding: 0px; margin: 0px;
          min-width: 310px;
          max-width: 310px; top: 101px;
          left: 650px;
        }
        .popup_message {
          padding-left: 48px;
        }
        .popup_panel {
          margin: 1em 0em 0em 1em;
          text-align: center;
        }
        .red{
          color: red;
        }
      </style>
</head>
<body>
<table class="altrowstable" id="alternatecolor">
  <tr class="evenrowcolor">
    <th>序号</th><th>类别</th><th>是否上线</th><th>操作</th>
  </tr>
  <tbody class="tbody">
  </tbody>
</table>
<div class="popup_container" class="ui-draggable" style="display: none">
  <h1 class="popup_title" style="cursor: move;">确定</h1>
  <div class="popup_content" class="confirm">
    <div class="popup_message">你确定这么做吗?</div>
    <div class="popup_panel">
      <input type="button" value="&nbsp;确定&nbsp;" id="popup_ok" onclick="submit()">
      <input type="button" value="&nbsp;取消&nbsp;" id="popup_cancel" onclick="hide()"></div>
  </div>
</div>
<script type="text/javascript">
  var dataArr = [];
  var selectData = [];
  function ajax(type,url,cb){
    var xhr='';
    if (window.XMLHttpRequest) {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr=new XMLHttpRequest();
    } else {
        // IE6, IE5 浏览器执行代码
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("GET","http://localhost:63343/tclLine/json/tsconfig.json",true);
    xhr.send();
    xhr.onreadystatechange=function()
    {
      if (xhr.readyState==4 && xhr.status==200)
      {
        cb(JSON.parse(xhr.responseText));
      }
    }
  }
  function render(id,data) {
   var arr = [];
   data.forEach(function (value,index) {
     var show= value.isShow==0?'上线':"下线";
     if(index%2==0){
       arr.push('<tr class="oddrowcolor"><td>'+(index+1)+'</td><td>'+value.categoryName+'</td><td>'+show+'</td><td class="red" onclick=show('+index+')>操作</td></tr>')
     } else {
       arr.push('<tr class="evenrowcolor"> <td>'+(index+1)+'</td><td>'+value.categoryName+'</td><td>'+show+'</td><td class="red" onclick=show('+index+')>操作</td></tr>')
     }
   });
   document.querySelector(id).innerHTML=arr.join('');
  };
  function submit() {
    ajax('get','http://localhost:63343/tclLine/json/tsconfig.json',function (data) {
         getData();
    })
  };
  function show(id) {
    selectData = dataArr[id];
    var dom = document.querySelector(".popup_message");
    if(selectData.isShow == 0){
      dom.innerHTML ='是否确定上线';
    } else {
      dom.innerHTML ='是否确定下线';
    }
    document.querySelector(".popup_container").style.display="block";
  }
  function hide() {
    document.querySelector(".popup_container").style.display="none";
  }
  function getData() {
    ajax('get','http://localhost:63343/tclLine/json/tsconfig.json',function (data) {
      dataArr = data.result;
      render('.tbody',data.result);
    })
  };
  window.onload=function(){
    getData();
  }
</script>
</body>
</html>
